<template>
    <div class="cases-form">
        <el-form ref="form" :model="cases" label-width="120px">

            <el-row>
                <el-col :span="20">
                    <div class="cases-logo">
                        <el-form-item label="客户头像:">
                            <el-upload
                                    class="avatar-uploader"
                                    :action="uploadFilePath"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :on-error="uploadError"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="cases.customerImage" :src="cases.customerImage" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>公司类型</template>
                        <el-input v-model="cases.companyType" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>案例标题</template>
                        <el-input v-model="cases.caseTitle" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="案例内容:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="cases.caseContent"
                                  style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>排序</template>
                        <el-input v-model="cases.sort" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="cases.remarks"
                                  style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>


        <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>
                </span>
        </div>


    </div>
</template>

<script>
    import casesApi from '@/api/case/caseApi'
    
    export default {
        name: "CaseForm",
        data() {
            return {
                uploadFilePath: process.env.VUE_APP_REQUEST_URL + '/a/core/file/fileUpload',
                cases: {
                    id: '',
                    customerImage: '',
                    companyType: '',
                    caseTitle: '',
                    caseContent:'',
                    sort: '',
                    remarks: '',
                },
            }
        },
        methods: {
            editDataBoxClose() {
                this.$emit('editDataBoxClose', false)
            },
            async onEditSubData() {
                let res = '';
                if (this.cases.id != '') {
                    res = await casesApi.updateCase(this.cases)
                    if (res.code == '200') {
                        this.$emit('onUpdateSuccess', res.data)
                    } else {
                        this.$message.error(res.msg)
                    }
                } else {
                    res = await casesApi.saveCase(this.cases)
                    if (res.code == '200') {
                        this.$emit('onAddSuccess', res.data)
                    } else {
                        this.$message.error(res.msg)
                    }
                }

            },
            clearDate() {
                let cases = {
                    customerImage: '',
                    companyType: '',
                    casesTitle: '',
                    casesContent:'',
                    sort: '',
                    remarks: '',
                }
                this.cases = cases
            },
            handleAvatarSuccess(res, file) {
                if (res.code == '200') {
                    this.cases.customerImage = res.data;
                } else {
                    this.uploadError();
                }

            },
            uploadError() {
                this.$message.error('上传失败')
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
        props: {
            editItemData: {
                require: true
            }
        },
        watch: {
            editItemData: {
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal != '') {
                        this.cases = newVal
                    }
                }
            }
        },
    }
</script>

<style scoped>

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>